<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonCss.js"></script>
		<title>权限管理</title>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				权限管理
				<el-button class="f-r" type="primary" icon="el-icon-plus" @click="addCont">添加角色</el-button>
			</div>
			<div class="pd10">	
				<el-table :data="tableData" stripe border style="width: 100%">
					<el-table-column prop="role" label="角色">
						<template slot-scope="scope">
							{{({"1":"省行","2":"市行","3":"行业协会","4":"运营人员"}[scope.row.role])}}
						</template>
					</el-table-column>
					<el-table-column prop="rolecont" label="角色描述"></el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button @click="handleEdit(scope.row)" type="text" size="medium">修改</el-button>
							<el-button @click="handleDelete(scope.row)" type="text" size="medium" class="color-F56C6C">删除</el-button>
						</template>
					</el-table-column>					
				</el-table>				
				<!-- 分页 -->
				<div class="bottomstate">
					<el-pagination class="f-r mt5" background @current-change="handleCurrentChange" :current-page="page" :page-size="limit" layout="total,prev, pager, next,jumper"
					 :total="total" ></el-pagination>
				</div>
			</div>
			<!-- 添加后台用户 -->
			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="form" label-width="120px">					
					<el-form-item label="角色名称:" >
						<el-input v-model="form.role" autocomplete="off" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="角色描述:" >
						<el-input v-model="form.rolecont" autocomplete="off" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="权限:" >
						<el-tree
						  :data="data"
						  show-checkbox
						  node-key="id"
						  default-expand-all
						  :props="defaultProps">
						</el-tree>
					</el-form-item>
					
				</el-form>
				<div class="dialog-footer text-r">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="onSubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script src="elementui-lib/lib/vue.js"></script>
	<script src="elementui-lib/lib/index.js"></script>
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/axios.js"></script>
	<script src="js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					tableData: [{
						role:"1",
						rolecont:"上传行协报表,下载行协报表,导出所属员工列表"
					},{
						role:"2",
						rolecont:"上传行协报表,下载行协报表,导出所属员工列表"
					}],	
					// 修改
					title:"",
					dialogFormVisible: false,
					form: {
						role:"",
						rolecont:""
					},
					data: [{
					  id: 1,
					  label: '广告管理',
					  children: [{
						id: 4,
						label: '删除',
					  },{
						id: 5,
						label: '修改',
					  }]
					}, {
					  id: 2,
					  label: '轮播图管理',
					  children: [{
						id: 6,
						label: '删除'
					  },{
						id: 7,
						label: '修改'
					  },{
						id: 8,
						label: '添加'
					  }]
					}, {
					  id: 3,
					  label: '监管政策法规',
					  children: [{
						id: 9,
						label: '删除'
					  },{
						id: 10,
						label: '修改'
					  },{
						id: 11,
						label: '添加'
					  }]
					}, {
					  id: 4,
					  label: '保险超级课堂（资讯类管理）',
					  children: [{
						id: 12,
						label: '删除'
					  },{
						id: 13,
						label: '修改'
					  },{
						id: 14,
						label: '添加'
					  }]
					}],
					defaultProps: {
					  children: 'children',
					  label: 'label'
					},
				}
			},
			methods: {
				search:function(){
					console.log(this.formInline)
				},
				// 添加
				addCont:function(){
					this.title="添加角色"
					this.form.role=""
					this.form.rolecont=""
					this.dialogFormVisible = true
				},
				handleEdit:function(row){
					this.title="修改角色"
					this.dialogFormVisible = true
				},
				// 删除
				handleDelete:function(row){
					let that = this
					that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						that.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});          
					});
				},
				// 确定
				IsNull: function() {
					let flag = false;
					if (this.form.role == "") {
						this.$message.error('角色不能为空');
						return flag = true;
					}
					if (this.form.rolecont == "") {
						this.$message.error('角色描述不能为空');
						return flag = true;
					}
				},
				onSubmit:function(){
					let that = this;
					if (that.IsNull()) {
						return;
					}
					console.log('===',this.form)
					
					this.dialogFormVisible = false
				},
			},
			created() {
				
			},
		});
	</script>
</html>
